import Vue from 'vue'
import Router from 'vue-router'
import GoodList from '@/views/GoodList'
import Cart from '@/views/Cart'
import Address from '@/views/Address'
import orderConfirm from '@/views/orderConfirm'
import orderSuccess from '@/views/orderSuccess'
  ''
Vue.use(Router);


export default new Router({
  mode: 'history',
  routes: [
    {
      path:'/',
      name:'GoodList',
      component:GoodList
    },
    {
      path: '/lists',
      name: 'GoodList',
      component: GoodList
    },
    {
      path: '/cart',
      name: 'Cart',
      component:Cart
    },
    {
      path: '/address',
      name: 'Address',
      component:Address
    },
    {
      path: '/orderConfirm',
      name: 'orderConfirm',
      component:orderConfirm
    },
    {
      path: '/orderSuccess',
      name: 'orderSuccess',
      component:orderSuccess
    },
  ]
})

/*
* 路由是根据不同的url地址展示不同的内容或页面，结构不变，改变内容的时候
* 优点：用户体检好，不需要每次都从服务器全部获取，快速展现给用户
* 1，不利于seo，因为只要一张页面是真实存在的，搜索引擎只能收入1张页面
* 2，使用浏览器的前进，后退键的时候会重新发送请求，没有合理的利用缓存
* 3，单页面无法记住滚动条的位置，无法前进，后退的时候记住滚动的位置
* */
/*
*  路由的方式：主要是对history的封装
*  1， 动态路由匹配:
*   a.
*   b.
*   c.
*  2，嵌套路由：路由嵌套路由
*    比如：用户菜单
*  3，编程式路由：通过js来实现页面的跳转
*   1，$router.push("name")
*   2,$router.push({path:"name"})
*   3,$router.push({path:"name?a=123"})
*   4,$router.push({path:"name",query:{a:123}})
*   5,router.go(1);
*  4，命名路由和命名视图
*  1,给路由定义不同的名字，根据名字进行匹配
*  2，给不同的router-view定义名字，通过名字进行对应组件的渲染
*  :to="{name:'cart'} ,v-bind:to={name:'cart'}
*
*  命名视图：就是给app view加name,在路由的配置中，组件中名字对应的组件，其中name与设置的一致
*   components:{
        default:GoodList,
        title:Title,
        info:Info
      }
* */

